<template>
  <div class="live-box">
      <!-- <p>房间号：{{liveForm.roomNum}}</p> -->
      <div id="dplayer"></div>
      <div class="chatwin-box">
          <div class="box-top" ref="boxTop">
            <!-- xxxx来到直播间 -->
              <div v-html="htmlContentUser" ></div>
              <div v-html="htmlContent" ref="chatContainer"> </div>
          </div>
          <div class="send-message-box">
              <!-- <div class="send-message-box-div1"> 123</div> -->
              <!-- <el-input type="textarea" v-model="messageContent" style="min-height: 60px;"></el-input> -->
              <!-- <el-input
                  type="textarea"
                  :autosize="{ minRows:4,maxRows: 4}"
                  placeholder="请输入内容"
                  v-model="messageContent">
              </el-input> -->
              <p class="p1" contenteditable="true" @input="updateMessage" ref="messageInput" @keyup.enter="sendMessage"></p>
              <el-button @click="sendMessage" type="primary" round class="button-style" size="small">发送</el-button>
          </div>
      </div>
  </div>
</template>

<script>
import Hls from 'hls.js'
export default {
  data () {
    return {
      liveForm: {
        id: '',
        // 播流路径
        playUrl: '',
        socket: null
      },
      // 当前登录的用户名
      frontDeskName: '',
      // 当前登录的用户id
      id: '',
      // 消息窗口 的消息内容
      messageContent: '',
      // 消息样式
      htmlContent: '',
      // 用户进直播消息样式
      htmlContentUser: '',
      dp: null,
      maxMessageLength: 200, // 设置最大字符数
      user: JSON.parse(window.localStorage.getItem('user'))
    }
  },
  watch: {
    liveForm (newData) {
      console.log(newData)
      if (newData.roomNum !== '') {
        this.$nextTick().then(() => {
          // this.webs()
          this.player()
        })
      }
    }
  },
  mounted () {
    this.frontDeskName = this.user.data.frontDeskName
    // 用户id
    this.id = this.user.data.id
    // 直播间id
    this.liveForm.id = this.$route.query.roid
    this.getLiveById()
  },
  methods: {
    updateMessage (event) {
      this.messageContent = event.target.innerText
      if (this.messageContent.length > this.maxMessageLength) {
        this.messageContent = this.messageContent.slice(0, this.maxMessageLength)
        this.$refs.messageInput.innerText = this.messageContent
      }
    },
    getLive () {
      const live = {
        playUrl: 'http://gz.lfeifan.com/live/c4ca4238a0b923820dcc509a6f75849b.m3u8?txSecret=e1ba542dc290db66027b0189817ebc83&txTime=64AF5884'
      }
      this.liveForm = live
    },
    // 发送消息
    sendMessage () {
      const range = window.getSelection().getRangeAt(0)
      const selectionContents = range.cloneContents()
      const div = document.createElement('div')
      div.appendChild(selectionContents)
      const html = div.innerHTML
      this.socket.send(this.messageContent)
      this.messageContent = ''
      // 清空 <p> 标签的值
      this.$refs.messageInput.textContent = ''
      this.htmlContent += html
      this.$nextTick(() => {
        const container = this.$refs.chatContainer
        container.scrollTop = container.scrollHeight
      })
      this.$nextTick(() => {
        const boxTop = this.$refs.boxTop
        boxTop.scrollTop = boxTop.scrollHeight
      })
    },
    // 创建对话
    // webs () {
    webs () {
      this.socket = new WebSocket('ws://localhost:15000/live/' + this.id + '/' + this.frontDeskName + '/' + this.liveForm.roomNum)
      // 打开socket
      this.socket.onopen = function () {
      }
      const that = this
      // 接收到消息的回调方法
      this.socket.onmessage = function (msg) {
        const data = JSON.parse(msg.data)
        let html = ''
        // if (data.roomNum === that.liveForm.roomNum) {
        if (data.come === 0) {
          html = '<p><span style="color: rgb(162,179,191)">' + data.frontDeskName + '：' + data.message + '</span>' + '</p>'
          const danmaku = {
            text: data.message,
            color: '#fff',
            type: 'right'
          }
          that.dp.danmaku.draw(danmaku)
          that.htmlContent += html
        } else {
          html = "<p style='color: rgb(162,179,191)'>" + data.frontDeskName + data.message + '</p>'
          that.htmlContentUser += html
        }
        // }
        // that.htmlContent += html
      }

      // 连接关闭的回调方法
      this.socket.onclose = function () {
        console.log('close')
      }
    },
    // 根据id获取直播间 信息
    getLiveById () {
      this.$axios.get('/live/getLiveById', {
        params: {
          // id: 16
          id: this.liveForm.id
        }
      }).then(res => {
        this.liveForm = res.data.data
      })
    },
    player () {
      const that = this
      this.dp = new this.$dPlayer({
        container: document.getElementById('dplayer'),
        live: true,
        danmaku: true,
        autoplay: true,
        apiBackend: {
          read: function (options) {
            console.log('Pretend to connect WebSocket')
            that.webs()
            options.success([])
          },
          send: function (options) {
            console.log('Pretend to send danmaku via WebSocket', options.data)
            that.messageContent = options.data.text
            that.sendMessage()
            options.success()
          }
        },
        video: {
          url: this.liveForm.livePlayUrl,
          // url: this.liveForm.livePlayUrl,
          type: 'customHls',
          customType: {
            customHls: function (video, player) {
              const hls = new Hls()
              hls.loadSource(video.src)
              hls.attachMedia(video)
            }
          }
        }
      })
      this.dp.play()
    }
  }
}
</script>

<style scoped>
.live-box {
    width: 100%;
    height: 100%;
    text-align: left;
}

.live-box #dplayer {
    width: 80%;
    height: 100%;
    float: left;
}

.chatwin-box {
    width: 20%;
    height: 100%;
    float: left;
    background-color: rgb(27, 33, 40);
    position: relative;
    overflow-y: auto;
}

.send-message-box {
    width: 100%;
    height: 200px;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgb(34, 41, 49);
    border-top: 1px solid #2b2b2b;
}

.send-message-box .send-message-box-div1 {
    width: 100%;
    height: 40px;
}

.send-message-box p.p1 {
    width: 100%;
    height: 100px;
    outline: none;
    border: none;
    margin: 0%;
    color: #fff;
    max-height: 100px;
    overflow-y: auto;
}

.send-message-box p.p1::-webkit-scrollbar {
    width: 8px;
}

.send-message-box p.p1::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}

.send-message-box p.p1::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 4px;
}

.box-top {
   width: 100%;
  /* background-color: red; */
  overflow-y: auto; /* 添加这行以启用垂直滚动条 */
  max-height: 100%; /* 添加这行以限制内容的最大高度 */
}

.el-textarea textarea {
    min-height: 80px;
}

.send-message-box .button-style {
    float: right;
}
.box-top > div {
    overflow-y: auto;
    max-height: 80%;
}

.box-top > div {
    overflow-y: auto;
    max-height: 100%;
    scrollbar-width: thin; /* 添加这行以调整滚动条的宽度 */
    scrollbar-color: transparent; /* 添加这行以设置滚动条的颜色为透明 */
}

/* 隐藏滚动条的样式 */
.box-top > div::-webkit-scrollbar {
    width: 0.2rem; /* 调整滚动条宽度 */
    background-color: transparent; /* 设置滚动条背景颜色为透明 */
}

.box-top > div::-webkit-scrollbar-thumb {
    background-color: transparent; /* 设置滚动条滑块颜色为透明 */
}

.box-top > div::-webkit-scrollbar-track {
    background-color: transparent; /* 设置滚动条轨道颜色为透明 */
}
</style>
